<template>
    <div class="cart">
        <table>
            <thead>
                <tr>
                    <th width="50">
                        <i @click="checkAllFn"
                            :class="checkAll ? 'iconfont icon-yduifuxuankuangxuanzhong': 'iconfont icon-yduifuxuankuang' "></i>
                    </th>
                    <th width="300">礼品信息</th>
                    <th>数量</th>
                    <th>小计(鸡腿)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in goodsArr" :key="item.id">
                    <td align="center">
                        <i @click="onSelect(index)" :class="item.ischecked ? 'iconfont icon-yduifuxuankuangxuanzhong'
                        : 'iconfont icon-yduifuxuankuang'"></i>
                    </td>
                    <td>
                        <img width="84" class="img" :src="'http://sc.wolfcode.cn' + item.coverImg" alt="">
                        <section>
                            <div class="title ell">{{ item.title }}</div>
                            <div class="desc ell">{{ item.versionDescription }}</div>
                        </section>
                    </td>
                    <td align="center">{{ item.coin }}鸡腿</td>
                    <td align="center">
                        <div class="step tanxin">
                            <div class="btn" @click="cutFn(index)">-</div>
                            <div>{{ item.total }}</div>
                            <div class="btn" @click="addFn(index)">+</div>
                        </div>
                    </td>
                    <td align="center">{{ item.totalCost }}鸡腿</td>
                    <td align="center">
                        <div class="del" @click="delFn(index, item.id)">删除</div>
                    </td>
                </tr>
            </tbody>
        </table>
        <h3>
            总计：<span>{{ allMonery }}鸡腿</span>
        </h3>
        <div class="submit">提交</div>
    </div>
</template>

<script>
import { CartDataApi, CartDelApi } from '@/request/api';
export default {
    data() {
        return {
            goodsArr: [],
            allMonery: 0,
            checkAll: false,
        }
    },
    methods: {
        cutFn(index) {
            if (this.goodsArr[index].total <= 1) {
                return;
            }
            this.goodsArr[index].total--;
            this.goodsArr[index].totalCost = this.goodsArr[index].coin * this.goodsArr[index].total;
            this.countMoney();
        },
        addFn(index) {
            this.goodsArr[index].total++;
            this.goodsArr[index].totalCost = this.goodsArr[index].coin * this.goodsArr[index].total;
            this.countMoney();
        },
        delFn(index, id) {
            this.goodsArr.splice(index, 1);
            CartDelApi({ id }).then((res) => {
                console.log(res);
                if (res.data.code === 0) {
                    let obj = { content: "删除成功", icon: "success" };
                    this.$store.dispatch("AsyncToast", obj)
                }
            });
            this.$store.commit('changeCartTotal', this.goodsArr.length)
            this.$emit('updatekeyFn')
        },
        onSelect(index) {
            this.goodsArr[index].ischecked = !this.goodsArr[index].ischecked;
            let sum = 0;
            this.goodsArr.map((item) => {
                if (item.ischecked) {
                    sum++;
                }
            });
            this.checkAll = sum >= this.goodsArr.length;
            this.countMoney();
            this.$forceUpdate();
        },
        checkAllFn() {
            this.checkAll = !this.checkAll;
            this.goodsArr.map((item) => {
                item.ischecked = this.checkAll;
            });
            this.countMoney();
        },
        countMoney() {
            this.allMonery = 0;
            this.goodsArr.map((item) => {
                if (item.ischecked) {
                    this.allMonery += item.totalCost
                }
            });
        },
    },
    created() {
        CartDataApi().then((res) => {
            if (res.data.code === 0) {
                this.goodsArr = res.data.data;
                this.goodsArr.forEach((item) => {
                    item.ischecked = false;
                })
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.cart {
    table {
        width: 100%;
        border: 1px solid #ccc;
        border-collapse: collapse;

        thead {
            background: #efefef;

            th {
                padding: 20px 0;
                font-weight: 700;
            }
        }

        i {
            cursor: pointer;

            &.icon-yduifuxuankuangxuanzhong {
                color: @blue;
            }
        }

        tbody {
            tr {
                td {
                    padding: 20px 0;
                    vertical-align: middle;

                    .img {
                        float: left;
                    }

                    section {
                        float: left;
                        margin-left: 5px;
                        padding-top: 20px;

                        div {
                            width: 150px;
                        }

                        .title {
                            margin-bottom: 20px;
                        }

                        .desc {
                            font-style: 14px;
                            color: #666;
                        }
                    }

                    .step {
                        background: #fff;
                        width: 150px;

                        .btn {
                            width: 30px;
                            height: 30px;
                            text-align: center;
                            line-height: 30px;
                            border: 1px solid #dddd;
                            box-sizing: border-box;
                            color: #999;
                            user-select: none;
                        }

                        div {
                            width: 45px;
                            height: 30px;
                            line-height: 30px;
                            border: 0;
                            box-sizing: border-box;
                            border-top: 1px solid #ddd;
                            border-bottom: 1px solid #ddd;
                            text-align: center;
                        }
                    }

                    .del {
                        padding: 5px 10px;
                        display: inline;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    h3 {
        color: #000;
        text-align: right;
        font-style: 20px;
        margin-top: 20px;
        margin-bottom: 20px;

        span {
            color: @orange;
        }
    }

    .submit {
        width: 100px;
        height: 40px;
        background: @blue;
        color: #fff;
        text-align: center;
        line-height: 40px;
        float: right;
        cursor: pointer;
    }
}
</style>